<html lang="en">
	<head>
		<title>台风美莎克的三维风流场与吸心结构</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #ffffff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;

				background-color: #050505;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {
				color: #ffffff;
			}

			#oldie a { color:#da0 }
			
			#title {
				position: absolute;
				top: 10px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 18px;
				color: #ffffff;
				z-index: 100;
			}
			
			#datetime {
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 14px;
				color: #cccccc;
				z-index: 100;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">台风美莎克的三维风流场与吸心结构</div>
			<div id="datetime">2020_09_01 13:00:00</div>
		</div>
		<script src="js/three.min.js"></script>
		<script src="js/Detector.js"></script>
		<script src="js/stats.min.js"></script>
		<script src="js/OrbitControls.js"></script>
		<script src="js/TyphoonFlow.js"></script>
		<script src="js/Terrain.js"></script>
		<script src="js/dat.gui.js"></script>

		<script>
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;
			var camera, scene, renderer;
			var typhoonFlow;
			var clock = new THREE.Clock();
			var guiControls;
			var displayControls;

			init();
			animate();

			function init() {

				// 台风可视化参数
				guiControls = new function() {
					this.windSpeed = 1.0;
					this.eyeRadius = 0.1;
					this.spiralTightness = 2.0;
					this.flowHeight = 1.0;
					this.animationSpeed = 1.0;
					this.opacity = 0.8;
				};

				// 显示控制参数
				displayControls = new function() {
					this.showFlowLines = true;
					this.showEyeStructure = true;
					this.showTerrain = true;
					this.showParticles = true;
					this.showHeatmap = true;
				};

				container = document.getElementById( 'container' );

				// 设置相机
				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 3000.0 );
				camera.position.set(2.0, 1.5, 2.5);
				camera.up.set(0, 1, 0);

				// 轨道控制器
				controls = new THREE.OrbitControls( camera, container );
				controls.target.set(0, 0, 0);

				// 创建场景
				scene = new THREE.Scene();
				
				// 添加环境光
				scene.add(new THREE.AmbientLight(0x222222));

				// 添加方向光
				var light = new THREE.DirectionalLight(0xffffff, 1.5);
				light.position.set(100, 200, 100);
				scene.add(light);

				// 创建台风流场
				typhoonFlow = new TyphoonFlow(scene);
				typhoonFlow.init();

				// 添加地形
				var terrain = new Terrain(scene);
				terrain.load();

				// 创建渲染器
				renderer = new THREE.WebGLRenderer({ antialias: true, devicePixelRatio: 1.0 });
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( 0x000011 );
				container.appendChild( renderer.domElement );

				// 性能监控
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				// 初始化UI
				initUI();
				onWindowResize();

				window.addEventListener( 'resize', onWindowResize, false );
			}

			function initUI() {
				// 台风参数控制
				var gui = new dat.GUI();
				gui.add(guiControls, 'windSpeed', 0.1, 3.0).step(0.1).name("风速强度").onChange(function(value) {
					typhoonFlow.setWindSpeed(value);
				});
				gui.add(guiControls, 'eyeRadius', 0.05, 0.3).step(0.01).name("台风眼半径").onChange(function(value) {
					typhoonFlow.setEyeRadius(value);
				});
				gui.add(guiControls, 'spiralTightness', 0.5, 5.0).step(0.1).name("螺旋紧密度").onChange(function(value) {
					typhoonFlow.setSpiralTightness(value);
				});
				gui.add(guiControls, 'flowHeight', 0.2, 2.0).step(0.1).name("流场高度").onChange(function(value) {
					typhoonFlow.setFlowHeight(value);
				});
				gui.add(guiControls, 'animationSpeed', 0.1, 3.0).step(0.1).name("动画速度").onChange(function(value) {
					typhoonFlow.setAnimationSpeed(value);
				});
				gui.add(guiControls, 'opacity', 0.1, 1.0).step(0.1).name("透明度").onChange(function(value) {
					typhoonFlow.setOpacity(value);
				});

				// 显示控制
				var displayGui = new dat.GUI();
				displayGui.add(displayControls, 'showFlowLines').name("显示流线").onChange(function(value) {
					typhoonFlow.setFlowLinesVisible(value);
				});
				displayGui.add(displayControls, 'showEyeStructure').name("显示台风眼").onChange(function(value) {
					typhoonFlow.setEyeStructureVisible(value);
				});
				displayGui.add(displayControls, 'showTerrain').name("显示地形").onChange(function(value) {
					// 地形显示控制将在后续实现
				});
				displayGui.add(displayControls, 'showParticles').name("显示粒子").onChange(function(value) {
					typhoonFlow.setParticlesVisible(value);
				});
				displayGui.add(displayControls, 'showHeatmap').name("显示热力图").onChange(function(value) {
					typhoonFlow.setHeatmapVisible(value);
				});
			}

			function onWindowResize( event ) {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			function animate() {
				requestAnimationFrame( animate );

				var delta = clock.getDelta();
				
				// 更新台风流场动画
				if (typhoonFlow) {
					typhoonFlow.update(delta);
				}

				render();
				stats.update();
			}

			function render() {
				renderer.render( scene, camera );
			}
			
		</script>

	</body>
</html>